<template>
  <div class="home-page">
    <!-- 第一屏 - 英雄区块 -->
    <section class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">智能需求响应，高效业务协同</h1>
        <p class="hero-subtitle">连接用户需求与企业服务的SaaS云平台</p>
        <div class="hero-buttons">
          <template v-if="!userState.isLoggedIn">
            <el-button 
              type="primary" 
              size="large"
              @click="handleAction('experience')"
            >
              立即体验
            </el-button>
            <el-button 
              size="large"
              @click="handleAction('learnMore')"
            >
              了解更多
            </el-button>
          </template>
          <template v-else>
            <el-button 
              type="primary" 
              size="large"
              @click="handleAction('publishDemand')"
            >
              发布需求
            </el-button>
            <el-button 
              size="large"
              @click="handleAction('browseDemands')"
            >
              浏览需求
            </el-button>
          </template>
        </div>
      </div>
    </section>

    <!-- 第二屏 - 平台特色 -->
    <section class="features-section">
      <div class="section-header">
        <h2 class="section-title">平台核心优势</h2>
      </div>
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">
            <el-icon class="icon-large"><el-icon-location /></el-icon>
          </div>
          <h3 class="feature-title">快速匹配</h3>
          <p class="feature-description">智能算法精准匹配用户需求与优质服务商</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <el-icon class="icon-large"><el-icon-timer /></el-icon>
          </div>
          <h3 class="feature-title">全程跟踪</h3>
          <p class="feature-description">需求进度实时更新，执行过程透明可视</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <el-icon class="icon-large"><el-icon-shield /></el-icon>
          </div>
          <h3 class="feature-title">安全可靠</h3>
          <p class="feature-description">企业认证保障，交易安全无忧</p>
        </div>
      </div>
    </section>

    <!-- 第三屏 - 工作流程 -->
    <section class="process-section">
      <div class="section-header">
        <h2 class="section-title">三步完成需求对接</h2>
      </div>
      <div class="process-timeline">
        <div class="process-step">
          <div class="step-number">1</div>
          <div class="step-content">
            <h3 class="step-title">发布需求</h3>
            <p class="step-description">用户描述具体需求</p>
          </div>
        </div>
        <div class="process-arrow">
          <el-icon class="arrow-icon"><el-icon-arrow-right /></el-icon>
        </div>
        <div class="process-step">
          <div class="step-number">2</div>
          <div class="step-content">
            <h3 class="step-title">智能匹配</h3>
            <p class="step-description">系统推荐合适企业</p>
          </div>
        </div>
        <div class="process-arrow">
          <el-icon class="arrow-icon"><el-icon-arrow-right /></el-icon>
        </div>
        <div class="process-step">
          <div class="step-number">3</div>
          <div class="step-content">
            <h3 class="step-title">执行跟踪</h3>
            <p class="step-description">实时查看执行进度</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 第四屏 - 用户角色展示 -->
    <section class="roles-section">
      <div class="section-header">
        <h2 class="section-title">多角色协同平台</h2>
      </div>
      <div class="roles-grid">
        <div class="role-card">
          <div class="role-icon">
            <el-icon class="icon-large"><el-icon-user /></el-icon>
          </div>
          <h3 class="role-title">需求方</h3>
          <p class="role-description">发布管理需求，选择优质服务商</p>
        </div>
        <div class="role-card">
          <div class="role-icon">
            <el-icon class="icon-large"><el-icon-office-building /></el-icon>
          </div>
          <h3 class="role-title">服务方</h3>
          <p class="role-description">承接用户需求，展示专业能力</p>
        </div>
        <div class="role-card">
          <div class="role-icon">
            <el-icon class="icon-large"><el-icon-setting /></el-icon>
          </div>
          <h3 class="role-title">平台方</h3>
          <p class="role-description">审核管理监督，保障交易公平</p>
        </div>
      </div>
    </section>

    <!-- 第五屏 - 数据统计 -->
    <section class="stats-section">
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-number">{{ animatedStats.users }}</div>
          <div class="stat-label">注册用户</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ animatedStats.enterprises }}</div>
          <div class="stat-label">合作企业</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ animatedStats.demands }}</div>
          <div class="stat-label">完成需求</div>
        </div>
      </div>
    </section>

    <!-- 第六屏 - CTA行动号召 -->
    <section class="cta-section">
      <div class="cta-content">
        <h2 class="cta-title">立即开启智能需求管理之旅</h2>
        <template v-if="!userState.isLoggedIn">
            <el-button 
              type="primary" 
              size="large"
              @click="handleAction('register')"
            >
              免费注册
            </el-button>
          </template>
          <template v-else>
            <el-button 
              type="primary" 
              size="large"
              @click="handleAction('dashboard')"
            >
              进入工作台
            </el-button>
          </template>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import {
  Location as ElIconLocation,
  Timer as ElIconTimer,
  Lock as ElIconShield,
  ArrowRight as ElIconArrowRight,
  User as ElIconUser,
  OfficeBuilding as ElIconOfficeBuilding,
  Setting as ElIconSetting
} from '@element-plus/icons-vue';

const router = useRouter();

// 从父组件（或Pinia/Vuex）获取用户状态
// 这里为了演示，创建一个模拟的用户状态
const userState = ref({
  isLoggedIn: false,
  userType: null
});

// 动画数字统计
const animatedStats = ref({
  users: 0,
  enterprises: 0,
  demands: 0
});

const targetStats = {
  users: '10000+',
  enterprises: '5000+',
  demands: '20000+'
};

// 数字动画函数
const animateNumber = (key, target, duration = 2000) => {
  const startValue = 0;
  const numericTarget = parseInt(target.replace(/[^0-9]/g, ''));
  const startTime = performance.now();

  const updateNumber = (currentTime) => {
    const elapsedTime = currentTime - startTime;
    const progress = Math.min(elapsedTime / duration, 1);
    const value = Math.floor(startValue + progress * numericTarget);
    
    animatedStats.value[key] = value + '+';
    
    if (progress < 1) {
      requestAnimationFrame(updateNumber);
    }
  };
  
  requestAnimationFrame(updateNumber);
};

// 检查元素是否在视口中
const isInViewport = (element) => {
  const rect = element.getBoundingClientRect();
  return (
    rect.top <= (window.innerHeight || document.documentElement.clientHeight)
  );
};

// 处理各种操作按钮点击
const handleAction = (action) => {
  switch (action) {
    case 'experience':
      // 点击立即体验按钮跳转到登录页面
      router.push('/login');
      break;
    case 'learnMore':
    case 'register':
      // 平滑滚动到相应区块或跳转到登录/注册页
      if (action === 'register') {
        router.push('/login');
      } else {
        document.querySelector('.features-section')?.scrollIntoView({ behavior: 'smooth' });
      }
      break;
    case 'publishDemand':
    case 'browseDemands':
      // 已登录用户的操作
      ElMessage.success(`即将跳转到${action === 'publishDemand' ? '发布需求' : '需求大厅'}页面`);
      break;
    case 'dashboard':
      // 进入工作台
      ElMessage.success('即将进入工作台');
      break;
  }
};

// 滚动监听处理
let statsAnimated = false;
const handleScroll = () => {
  if (!statsAnimated) {
    const statsSection = document.querySelector('.stats-section');
    if (statsSection && isInViewport(statsSection)) {
      // 触发数字动画
      animateNumber('users', targetStats.users);
      animateNumber('enterprises', targetStats.enterprises);
      animateNumber('demands', targetStats.demands);
      statsAnimated = true;
    }
  }
};

onMounted(() => {
  // 为了演示，可以从父组件或localStorage获取用户状态
  // 检查是否有模拟登录状态
  if (window.mockUserState) {
    userState.value = { ...window.mockUserState };
  }
  
  // 添加滚动监听
  window.addEventListener('scroll', handleScroll);
  // 初始检查
  handleScroll();
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
.home-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 通用区块样式 */
.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* 英雄区块 */
.hero-section {
  background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
  color: white;
  padding: 120px 0;
  text-align: center;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 20px;
  margin-bottom: 40px;
  opacity: 0.9;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* 平台特色区块 */
.features-section {
  padding: 80px 20px;
  background-color: #fff;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  padding: 30px;
  background-color: #f8f9fa;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  margin-bottom: 20px;
  color: #1890ff;
}

.icon-large {
  font-size: 48px;
}

.feature-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

.feature-description {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

/* 工作流程区块 */
.process-section {
  padding: 80px 20px;
  background-color: #f0f2f5;
}

.process-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.process-step {
  display: flex;
  align-items: center;
  gap: 20px;
}

.step-number {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #1890ff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
}

.step-content {
  text-align: left;
}

.step-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 5px 0;
  color: #333;
}

.step-description {
  color: #666;
  margin: 0;
  font-size: 14px;
}

.process-arrow {
  color: #1890ff;
}

.arrow-icon {
  font-size: 24px;
}

/* 用户角色展示区块 */
.roles-section {
  padding: 80px 20px;
  background-color: #fff;
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.role-card {
  padding: 40px 30px;
  background-color: #f8f9fa;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.role-card:hover {
  border-color: #1890ff;
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(24, 144, 255, 0.1);
}

.role-icon {
  margin-bottom: 20px;
  color: #67c23a;
}

.role-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

.role-description {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

/* 数据统计区块 */
.stats-section {
  padding: 80px 20px;
  background-color: #f0f2f5;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.stat-item {
  text-align: center;
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 48px;
  font-weight: 700;
  color: #1890ff;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 16px;
  color: #666;
}

/* CTA行动号召区块 */
.cta-section {
  padding: 80px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
}

.cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.cta-title {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 30px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .features-grid,
  .roles-grid,
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 36px;
  }
  
  .hero-subtitle {
    font-size: 18px;
  }
  
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-buttons .el-button {
    width: 200px;
  }
  
  .process-timeline {
    flex-direction: column;
    gap: 30px;
  }
  
  .process-arrow {
    transform: rotate(90deg);
  }
  
  .features-grid,
  .roles-grid,
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .cta-title {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 80px 20px;
  }
  
  .hero-title {
    font-size: 28px;
  }
  
  .section-title {
    font-size: 24px;
  }
  
  .feature-card,
  .role-card,
  .stat-item {
    padding: 20px;
  }
}
</style>